<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

let active = ref('/homepage');
function tabbar_change(index) {
    router.push(index)
}
onMounted(() => {
    active.value = router.currentRoute.value.fullPath
})
</script>

<template>
    <div class="footer">
        <van-tabbar v-model="active" @change="tabbar_change">
            <van-tabbar-item name="/index" icon="wap-home">首页</van-tabbar-item>
            <van-tabbar-item name="/showescort" icon="friends-o">陪诊师</van-tabbar-item>
            <van-tabbar-item name="/totalorder" icon="balance-list">订单</van-tabbar-item>
            <van-tabbar-item name="/mine" icon="smile">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<style scoped>
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 100;
}
</style>
